<template>
  <div>
    <canvas ref="canvas" width="1200px" height="750px" style="width: 100%;height: 375px;"></canvas>
    <!-- <img :src="imgsrc" alt=""> -->
  </div>
</template>

<script>
import penpower from './index.js';
const $ajaxs = penpower.ajaxs
export default {
    data () {
        return {
          isPolling:false,
          canvas:null, 
          context:null,
          imgsrc:'',
          LastSignatureBase64Data:'',
        }
    },
    created () {
      $ajaxs(penpower.initUrl)
    },
    mounted(){
      this.canvas = this.$refs.canvas
      if (this.canvas.getContext) {
          this.context = this.canvas.getContext('2d');
      }
      $ajaxs(penpower.initUrl).then(res=>{
        if(res.readyState === 4 && res.status === 200){
          let status = JSON.parse(res.responseText)
          if(status===true){
            this.isPolling=true
            this.getInkpoll()
            this.getStatusPoll()
          }else{
            this.isPolling=false
            this.context.font = "bold 46px Arial";
            this.context.fillText('设备未连接或已损坏', this.canvas.width/3,this.canvas.height/2);
            // this.$message.error('设备初始化失败!请检查设备是否连接或损坏')
          }
        }
      })
    },
    methods:{
      //监听手写板画笔痕迹
      getInkpoll(){
        let time = setTimeout(()=>{
          clearTimeout(time);
          if(this.isPolling){
            $ajaxs(penpower.getInkUrl).then(res=>{
              if(res.readyState === 4 && res.status === 200){
                let list = JSON.parse(JSON.parse(res.responseText))
                list.forEach(item=>{
                  if(item.EventType === 0){
                    this.drawImage(item.Image)
                    this.LastSignatureBase64Data = item.Image
                  }
                })
              }
              if(this.isPolling){
                this.getInkpoll()
              }
            })
          }
        },100)
      },
      //获取手写板按键
      getStatusPoll(){
        let time = setTimeout(()=>{
          clearTimeout(time);
          if(this.isPolling){
            $ajaxs(penpower.confirmStatusUrl).then(res=>{
              if(res.readyState === 4 && res.status === 200){
                let status = JSON.parse(res.responseText)
                if(status=='1'){
                  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                  let src =  this.drawImage(this.LastSignatureBase64Data);
                  this.$emit('close',src)
                }else if(status=='0'){
                  this.clearInk()
                  this.$emit('close',null)
                }
              }
              if(this.isPolling){
                this.getStatusPoll()
              }
            })
          }
        },100)
      },
      //将手写板内容写入canvas
      drawImage(base64) {
          var dataUrl = 'data:image/png;base64,';
          dataUrl = dataUrl + base64;
          // 在image中載入圖檔，再畫到canvas呈現
          var img = new Image();
          img.addEventListener('load',()=>{
            this.context.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
          }, false);
          // this.imgsrc = dataUrl  16606251763
          img.src = dataUrl;
          return dataUrl
      },
      //卸载 手写板设备
      uninitDevice(){
        this.isPolling = false
        $ajaxs(penpower.uninitUrl).then(res=>{
          
        })
      },
      //保存
      commit(){
        this.clearInk()
        let src = this.drawImage(this.LastSignatureBase64Data);
        if(this.isPolling){
          this.uninitDevice()
        }
        return src
      },
      //清空画板
      clearInk(){
        if(this.isPolling){
          $ajaxs(penpower.clrInkUrl).then(res=>{
            if(res.readyState === 4 && res.status === 200){
              this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            }
          })
        }
      }
    },
    beforeDestroy(){
      if(this.isPolling){
        this.uninitDevice()
      }
    }
}
</script>

<style>

</style>